<template>
	<view>
		<u-form class="detailBg">
			<u-form-item label="订单日期" label-width="auto" label-align="center">
				<u-input :value="item.orderTime" disabled input-align="center"/>
			</u-form-item>
			<u-form-item label="订单状态" label-width="auto" label-align="center">
				<u-input :value="orderStatus" disabled input-align="center"/>
			</u-form-item>
			<view v-if="item.tableId != null">
				<u-form-item label="桌位" label-width="auto" label-align="center">
					<u-input :value="item.tableName" disabled input-align="center"/>
				</u-form-item>
			</view>
			<view v-else-if="address != null">
				<u-form-item label="收货地址" label-width="auto" label-align="center">
					<u-input :value="address.detailAddress" disabled input-align="center"/>
				</u-form-item>
				<u-form-item label="收货人" label-width="auto" label-align="center">
					<u-input :value="address.name" disabled input-align="center"/>
				</u-form-item>
				<u-form-item label="手机号" label-width="auto" label-align="center">
					<u-input :value="address.phone" disabled input-align="center"/>
				</u-form-item>
			</view>
			<u-form-item>
				<uni-card :isFull="true" title="详情">
					<uni-table class="detailTable" emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="45px"></uni-th>
							<uni-th align="center" width="45px">名称</uni-th>
							<uni-th align="center" width="45px">数量</uni-th>
							<uni-th align="center" width="45px">单价</uni-th>
						</uni-tr>
						<uni-tr v-for="detail in item.orderDetails">
							<uni-td>
								<image :src="detail.dishImg" class="detailImage"></image>
							</uni-td>
							<uni-td>
								{{detail.dishName}}
							</uni-td>
							<uni-td>
								{{detail.dishQuantity}}
							</uni-td>
							<uni-td>
								￥{{detail.dishPrice}}
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>总计</uni-td>
							<uni-td></uni-td>
							<uni-td></uni-td>
							<uni-td><u-input :value="calculateSubtotal(item)" disabled/></uni-td>
						</uni-tr>
					</uni-table>
				</uni-card>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import {
		getAddress
	} from '@/api/system/address/address'
	export default {
		data() {
			return {
				item: null,
				orderStatus: '未知',
				address:null
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.item);
			// console.log(this.item)
			if(this.item.orderStatus === '0'){
				this.orderStatus = "未支付"
			}else if(this.item.orderStatus === '1'){
				this.orderStatus = "已支付"
			}else if(this.item.orderStatus === "2"){
				this.orderStatus = "已取消"
			}else if(this.item.orderStatus === '3'){
				this.orderStatus = "已完成"
			}else{
				this.orderStatus = "未知"
			}
			
			if (this.item.tableId == null && this.item.addressId != null){
				getAddress(this.item.addressId).then(res => {
					// console.log(res)
					this.address = res.rows[0]
					console.log(this.address)
				})
			}
		},
		methods: {
			calculateSubtotal(data) {
				let subtotal = 0;
				if (data.orderDetails && data.orderDetails.length > 0) {
					data.orderDetails.forEach((detail) => {
						subtotal += detail.subtotal;
					});
				}
				return '￥'+subtotal;
			}
		}
	}
</script>

<style>

.detailBg{
	margin: 2.5vh 2.5vh;
	border-radius: 10px;
	padding: 15px 25px;
	width: 90vw;
	/* height: 90vh; */
	background-color: white;
}
.detailImage{
	border-radius: 8px;
	width: 45px;
	height: 45px;
	
}
</style>